<template>
  <div :class="['sidebar', collapsed ? 'collapsed' : '']">
    <div class="addChat" @click="chatClick">
      <img :src="add" alt="" srcset="" />
      新建会话
    </div>
    <div class="historyHead">
      <img :src="date" alt="" srcset="" />
      历史回话
    </div>
    <div class="menused" @click="toggle" @mouseenter="mouseenter" @mouseleave="mouseleave">
      <svg
        width="12px"
        height="12px"
        viewBox="0 0 12 12"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <title>编组</title>
        <g id="pc客户端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="备授课-教案设计" transform="translate(-239.000000, -172.000000)" fill="#666666" fill-rule="nonzero">
            <g id="编组-16" transform="translate(233.000000, 166.000000)">
              <g id="编组" transform="translate(6.000000, 6.000000)">
                <path
                  d="M10.2,0 C11.1941126,0 12,0.80588745 12,1.8 L12,10.2 C12,11.1941126 11.1941126,12 10.2,12 L1.8,12 C0.80588745,12 0,11.1941126 0,10.2 L0,1.8 C0,0.80588745 0.80588745,0 1.8,0 L10.2,0 L10.2,0 Z M3.6,1.20000001 L1.8,1.20000001 L1.71840001,1.206 C1.45157762,1.24189888 1.24161112,1.45161982 1.20540001,1.71840001 L1.20000001,1.8 L1.20000001,10.2 L1.206,10.2816 C1.24189888,10.5484224 1.45161982,10.7583889 1.71840001,10.7946 L1.8,10.8 L3.6,10.8 L3.6,1.20000001 L3.6,1.20000001 Z M10.2,1.19999889 L4.80000001,1.19999889 L4.80000001,10.8 L10.2,10.8 L10.2816,10.794 C10.5484224,10.7581011 10.7583889,10.5483802 10.7946,10.2816 L10.8,10.1999989 L10.8,1.8 L10.794,1.71840001 C10.7539842,1.42110894 10.4999715,1.19942513 10.2,1.19999889 Z"
                  id="形状"
                  :style="{ fill: iconColor }"
                ></path>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </div>
    <div class="listBox">
      <!-- <div v-if="!isEmpty(state.chatsToday)">今天</div> -->
      <div class="history" v-for="item in state.chatsToday" :key="item.id" @click="getRightLogs(item.id)">
        <div :class="`item ${item.id === state.checkLogId ? 'item-checked' : ''}`">
          <span>{{ item.title }}</span>
          <div class="closew" @click.stop="chatLogDeleteFn(item.id)">
            <img :src="miniclose" alt="" />
          </div>
        </div>
      </div>
      <!-- <div v-if="!isEmpty(state.chatsYesterday)">昨天</div> -->
      <div class="history" v-for="item in state.chatsYesterday" :key="item.id" @click="getRightLogs(item.id)">
        <div :class="`item ${item.id === state.checkLogId ? 'item-checked' : ''}`">
          <span>{{ item.title }}</span>
          <div class="closew" @click.stop="chatLogDeleteFn(item.id)">
            <img :src="miniclose" alt="" />
          </div>
        </div>
      </div>
      <!-- <div v-if="!isEmpty(state.chatsEarly)">更早</div> -->
      <div class="history" v-for="item in state.chatsEarly" :key="item.id" @click="getRightLogs(item.id)">
        <div :class="`item ${item.id === state.checkLogId ? 'item-checked' : ''}`">
          <span>{{ item.title }}</span>
          <div class="closew" @click="chatLogDeleteFn(item.id)">
            <img :src="miniclose" alt="" />
          </div>
        </div>
      </div>

      <!-- 空记录 -->
      <div
        v-if="isEmpty(state.chatsToday) && isEmpty(state.chatsYesterday) && isEmpty(state.chatsEarly)"
        class="noData"
      >
        <LottieAnimation no-data-name="noDataXiaoxi" class="img" />
        <!-- <img :src="noData" alt="" srcset="" /> -->
        <span>暂无对话</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import add from '@/assets/ai/add.svg';
import date from '@/assets/ai/date.svg';
import miniclose from '@/assets/ai/miniclose.svg';
import noData from '@/assets/ai/noData.png';
import { onMounted, reactive, ref } from 'vue';
import { modelType } from '@/utils/request';
import { chatGet, chatLogDelete } from '@/services/chat';
import { getStorage } from '@/utils';
import { cloneDeep, isEmpty } from 'lodash';
import { ErrCode } from '@/utils/request';
import { ElMessage } from 'element-plus';
import LottieAnimation from '@/components/animation/index.vue';

const emits = defineEmits(['getId', 'removeId', 'toggle']);

const props = defineProps({
  collapsed: {
    type: Boolean,
  },
  addNew: {
    type: Function,
    default: (e: any) => e,
  },
});

const iconColor = ref('#666666');

const mouseenter = () => {
  iconColor.value = '#FF7C00';
};

const mouseleave = () => {
  iconColor.value = '#666666';
};

const botId = getStorage('botId');

const state = reactive({
  chats: [],
  chatId: '',
  conversation_id: '',
  chatsToday: [] as any,
  chatsYesterday: [] as any,
  chatsEarly: [] as any,
  checkLogId: '',
});

const chatClick = () => {
  state.checkLogId = '';
  props.addNew();
};

const toggle = () => {
  emits('toggle');
};

const getChat = async (id?: any) => {
  if (!modelType) {
    return;
  }
  // 查询详情
  if (id) {
    getRightLogs(id);
  }
};

// 删除历史
const chatLogDeleteFn = async (id: string) => {
  if (id) {
  }
};

// 查询右侧列表
const getRightLogs = (id: any) => {
  state.checkLogId = id;
  emits('getId', id);
};

defineExpose({ getChat });

onMounted(() => {
  getChat();
});
</script>

<style lang="scss" scoped>
.sidebar {
  border-right: 1px solid #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 17px 10px;
  position: relative;
  transition: 0.225s;
  width: 260px;
  flex-shrink: 0; /* 防止被挤压 */
  box-sizing: border-box;
  .menused {
    position: absolute;
    top: 24px;
    right: 0;
    width: 24px;
    height: 24px;
    background: #f3f3f3;
    border-radius: 0px 4px 4px 0px;
    right: -24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    svg {
      width: 12px;
      height: 12px;
    }
  }

  .addChat {
    width: 228px;
    height: 40px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 20px;

    img {
      margin-right: 8px;
      width: 16px;
      height: 16px;
    }
  }

  .historyHead {
    width: 100%;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    padding: 9px 0;
    margin-top: 16px;
    margin-bottom: 8px;

    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }

  .listBox {
    overflow-y: auto;
    width: 100%;
    height: calc(100% - 106px);
    .history {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;

      .item {
        width: 204px;
        // background: #f9f9f9;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #1a1a1a;
        line-height: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        color: #6a6a6a;

        &:hover {
          background: #f9f9f9;
          .closew {
            display: flex;
          }
        }

        span {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .closew {
          width: 12px;
          height: 12px;
          background: rgba(0, 0, 0, 0.45);
          border-radius: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          display: none;

          img {
            width: 6px;
            height: 6px;
          }
        }
      }
      .item-checked {
        background: #f9f9f9;
        color: #1a1a1a;
      }
    }

    .noData {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px;

      .img {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
      }

      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #cccccc;
        line-height: 20px;
      }
    }
  }
}

.collapsed {
  transition: 0.225s;
  margin-left: -259px;
  border-right: 1px solid #fff;
}
</style>
